<template>
    <v-dialog
            persistent
            overlay-opacity="0.8"
            width="800px"
            v-model="imageDialog"
    >
        <div id="image-box">
            <div id="file-info">
                <div class="d-inline-block text-h6 float-left text-truncate" :title="image.name" style="width: 600px">
                    {{image.name}}
                </div>
                <div class="d-inline-block float-right" style="width: 80px;">
                    <v-btn @click="$emit('close')" color="error" class="float-right">
                        <v-icon>mdi-close</v-icon>
                    </v-btn>
                </div>
            </div>
            <v-img :src="imageSrc" width="780" height="440" contain>
                <template v-slot:placeholder>
                    <v-row
                            class="fill-height ma-0"
                            align="center"
                            justify="center"
                    >
                        <v-progress-circular indeterminate color="primary"></v-progress-circular>
                    </v-row>
                </template>
            </v-img>
        </div>
    </v-dialog>
</template>

<script>
    export default {
        name: "MyImageDialog",
        props: {
            imageDialog: {
                type: Boolean,
                default: false
            },
            image: {
                type: Object
            }
        },
        data() {
            return {
                imageSrc: ''
            }
        },
        methods: {
            getPreviewUrl() {
                let _this = this;
                let key = this.image.key;
                _this._get({
                    url: 'system/disk/get-preview-url',
                    params: {
                        key
                    }
                }).then(rsp => {
                    _this.imageSrc = rsp.data
                }).catch(error => {
                    console.log(error);
                    _this.$serverError();
                })
            }
        },
        watch: {
            imageDialog: function () {
                if (this.imageDialog === true) {
                    this.getPreviewUrl();
                }
            }
        }
    }
</script>

<style scoped>
    #image-box {
        width: 800px;
        height: 510px;
        padding: 10px;
        overflow: hidden;
        background-color: white;
    }

    #file-info {
        height: 40px;
        margin-bottom: 10px;
        border-bottom: 1px solid #eeeeee;
    }
</style>